
$nt-progress-tiny: rem-calc(2) !default;
$nt-progress-small: rem-calc(5) !default;
$nt-progress-medium: rem-calc(10) !default;
$nt-progress-large: rem-calc(20) !default;

$nt-progress-meter-transition: width .5s cubic-bezier(.8, .2, .2, .8) !default;
$nt-progress-circle-transition: stroke-dashoffset .5s cubic-bezier(.8, .2, .2, .8) !default;

$nt-progress-sizes: (
  tiny: $nt-progress-tiny,
  small: $nt-progress-small,
  medium: $nt-progress-medium,
  large: $nt-progress-large
) !default;


@mixin nt-progress-circle() {
  display: inline-block;
  position: relative;
  text-align: center;

  svg {
    transform: rotate(-90deg);
  }

  svg circle {
    stroke: $progress-background;
    box-sizing: border-box;
    transition: $nt-progress-circle-transition;
    @if has-value($progress-radius) {
      &.progress-meter-circle {
        stroke-linecap: round;
      }
    }
  }

  .nt-progress-circle-inner {
    border-style: solid;
    border-color: $progress-background;
    overflow: hidden;
  }
}

@mixin nt-progress-circle-size($size: $nt-progress-medium) {

  svg circle {
    stroke-width: $size;
  }
}

@mixin nt-progress-circle-style($color: get-color(primary)) {
  svg circle.progress-meter-circle {
    stroke: $color;
  }
}

@mixin nt-progress-size($size: $nt-progress-medium) {
  height: $size;
}

@mixin nt-progress {
  .progress {
    display: block;
    @include nt-progress-size;
    .progress-meter {
      transition: $nt-progress-meter-transition;
    }

    @each $name, $size in $nt-progress-sizes {
      &.#{$name} {
        @include nt-progress-size($size: $size);
      }
    }
  }

  .nt-progress-circle {
   @include nt-progress-circle;
   @include nt-progress-circle-size;
   @include nt-progress-circle-style;

    @each $name, $color in $foundation-palette {
      &.#{$name} {
        @include nt-progress-circle-style($color);
      }
    }

    @each $name, $size in $nt-progress-sizes {
      &.#{$name} {
        @include nt-progress-circle-size($size);
      }
    }
  }
}
